@import '@/common/css/variables.less';
.box-shadow{
	width: 690rpx;padding: 0 30rpx 50rpx;margin: 40rpx auto 0; border-radius: 20rpx;background-color: #fff8f3;position: relative;
	.rope{
		width: 690rpx;height: 82rpx;padding: 0 60rpx; position: absolute;left: 0;top: -60rpx;
		&::before, &::after{
			display: block;content: " ";width: 20rpx;height: 82rpx;background: url(https://static.newbeaconhotels.com/app/hotel/activity/rope.png) no-repeat;background-size: 100%;
		}
	}
}
.common-title{
	height: 88rpx;
	&::before,&::after{display: block;content: " ";width: 96rpx;height: 16rpx;margin: 0 14rpx; background: url(https://static.newbeaconhotels.com/app/hotel/group/rule.png) no-repeat;background-size: 100%;}
	&::after{transform: rotate(180deg);}
}
.page-pull{
	padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
	.banner{
		position: relative;min-height: 100rpx;z-index: 1;
		.image{width: 750rpx;}
		.time{width: 540rpx;height: 44rpx;line-height: 44rpx;text-align: center;font-size: 26rpx;color: #fff;background: url(https://static.newbeaconhotels.com/app/hotel/activity/pull-time.png) no-repeat;background-size: 100%;position: absolute;left: 50%;top: 182rpx;transform: translateX(-50%);}
	}
	.task{
		width: 750rpx;height: 1000rpx;overflow: hidden; margin-top: -100rpx; position: relative;z-index: 3; background: url(https://static.newbeaconhotels.com/app/hotel/activity/pull-how.png) no-repeat;background-size: 100%;
		.common-title{margin-top: 16rpx;margin-bottom: 28rpx;}
		.image{display: block; width: 512rpx;height: 160rpx;margin: 0 auto;}
		.desc{font-size: 28rpx;line-height: 28rpx;text-align: center;padding-top: 60rpx;}
		.steps{
			height: 300rpx; padding: 90rpx 105rpx 0 140rpx;
			.item{
				width: calc((100% - 100rpx) / 2);position: relative;
				&:first-child::before{display: block;content: " ";width: 40rpx;height: 6rpx;background-color: #ffe8e8;position: absolute;left: -40rpx;}
				&:last-child{width: 100rpx;}
				.line{width: 100%;height: 6rpx;background-color: #ffe8e8;position: relative;}
				.circle{width: 16rpx;height: 16rpx;border-radius: 50%;background-color: #ffe8e8;position: absolute;left: 0;top: -5rpx;}
				.text{min-width: 100rpx;text-align: center; font-size: 24rpx;color: #333;position: absolute;top: -50rpx;left: 8rpx;transform: translateX(-50%);}
				&.active{
					.line{background-color: #ff4c4c;}
					.circle{background-color: #ff4c4c;}
				}
				&.active:first-child::before{background-color: #ff4c4c;}
				.goods{
					min-width: 100rpx;position: absolute;top: 40rpx;left: 8rpx;transform: translateX(-50%);
					image{display: block; width: 74rpx;height: 96rpx;margin: 0 auto 12rpx;}
					.get{
						width: 54rpx;height: 24rpx;font-size: 20rpx;background-color: #ffd21f;color: #ed2100;border-radius: 20rpx;position: absolute;top: 32px;left: 50%;transform: translateX(-50%);
						&.grey{background-color: #e1e1e1;color: #666666;}
					}
				}
			}
		}
		.btn{width: 160rpx;height: 160rpx;border-radius: 50%; margin: 0 auto;opacity: 0;}
	}
	.prize{
		.item{
			padding: 20rpx 0;border-bottom: 2rpx dashed #ff6a2c;
			&:last-child{border-bottom: none;}
			.image{width: 74rpx;height: 96rpx;}
			.photo{width: 90rpx;height: 90rpx;border-radius: 50%;background-color: #ff6a2c;}
			.name{flex: 1;padding-left: 16rpx;}
			.btn{
				width: 170rpx;height: 46rpx;line-height: 46rpx;text-align: center;font-size: 22rpx;color: #fff; border-radius: 24rpx;background-color: @theme-color;
				&.grey{background-color: #e1e1e1;color: #666666;}
			}
		}
	}
	.record{
		.item{
			padding: 16rpx 0;
			.photo{width: 60rpx;height: 60rpx;border-radius: 50%;background-color: #ff6a2c;}
		}
	}
	.topboard{
		.item{
			padding: 16rpx 0;
			.photo{width: 60rpx;height: 60rpx;border-radius: 50%;background-color: #ff6a2c;}
			.number{width: 84rpx;}
			.name{flex: 1;padding-left: 70rpx;}
		}
	}
}

.pull-record{
	.search-box{
		padding: 20rpx 30rpx;
		.search{
			width: 560rpx;height: 60rpx;padding: 0 20rpx; background-color: #f5f5f5;border-radius: 30rpx;
			.icon{width: 28rpx;height: 28rpx;}
			input{flex: 1; font-size: 24rpx;padding: 0 16rpx;}
		}
	}
	.record{
		padding: 0 30rpx;
		.item{
			padding: 30rpx 0;border-bottom: 2rpx solid #f5f5f5;
			.title{padding-bottom: 30rpx;line-height: 30rpx;}
			.photo{width: 60rpx;height: 60rpx;border-radius: 50%;background-color: #ff6a2c;}
			.name{flex: 1;padding-left: 50rpx;}
		}
	}
}








